<link rel="stylesheet" type="text/css" href="/assets/css/home.css?v=20241015-2" /> 
<div class="container">
    <div class="app">
        <div class="share-box" style="display:none;">
            <div class="share-position">
                <img src="/assets/img/arrow.jpg" class="share-img">
                <div class="share-text">点击右上角分享转发</div>
            </div>
        </div>
        <div class="home-logo h5-img" style="padding-top:15px;padding-bottom:20px;">
            <img src="/assets/img/home/logo.png" class="home-logo-img">
        </div>

        <div class="home-main h5-img">
            <div class="box">
                <img src="/assets/img/home/main-cover.png" class="home-main-img">
            </div>
        </div>

        <div class="home-coming h5-img">
            <img src="/assets/img/home/coming.png" class="home-coming-img">
        </div>

        <div class="fuli-box">
            <img src="/assets/img/home/reward/reward01.png">
        </div>
        <div class="fuli-box">
            <img src="/assets/img/home/reward/reward2.png">
        </div>
        <!-- <div class="fuli-box">
            <img src="/assets/img/home/reward/reward3.png">
        </div> -->

        <div class="form-box">
            <form action="#" class="form-yuyue">
                <div class="input-box">
                    <div class="input-text">手机号</div>
                    <div class="input-input">
                        <input type="number" placeholder="输入手机号码" name="mobile" id="mobile">
                    </div>
                </div>
                <div class="input-box">
                    <div class="input-text">验证码</div>
                    <div class="input-input">
                        <input type="text" maxlength="6" placeholder="输入验证码" name="code" id="code">
                    </div>
                    <div class="input-button">
                        <a href="javascript:;" class="code-btn">获取验证码</a>
                    </div>
                </div>
                <div class="input-box">
                    <div class="input-input">
                        <a href="javascript:;" class="home-btn" id="submit">立即预约</a>
                    </div>
                    <div class="input-input">
                        <a href="javascript:;" class="home-btn share">转发分享</a>
                    </div>
                </div>
                <input type="hidden" name="pid" id="pid" value="{$pid}">
                <input type="hidden" name="s" id="s" value="<php>echo D('Sms')->create_token();</php>">
            </form>

            <div class="yuyue-info">
                <div class="yuyue-info-title">预约成功</div>
                <div class="yuyue-info-text">
                    恭喜您成功预约《奔跑吧》官方手游，游戏上线后登陆即可领取预约福利。
                </div>
                <div class="yuyue-info-text">
                    “奔跑吧典藏卡”与“浙江卫视跨年演唱会门票”属于限量奖励，采用抽签形式发放。欢迎积极转发本页面，每一次有效转发分享都能提高中签几率。
                </div>
                <div class="input-box">
                    <div class="input-input">
                        <a href="javascript:;" class="home-btn share">转发分享</a>
                    </div>
                </div>
            </div>

            <div class="home-count">
                <div class="home-count-item-box">
                    <div class="home-count-num">1w</div>
                    <div class="home-count-item">
                        <img src="/assets/img/home/count/count1.png">
                    </div>
                    <div class="home-count-info">R币×3000</div>
                </div>
                <div class="home-count-item-box">
                    <div class="home-count-num">5w</div>
                    <div class="home-count-item">
                        <img src="/assets/img/home/count/count2.png">
                    </div>
                    <div class="home-count-info">稀有时装<br/>集卡计划</div>
                </div>
                <div class="home-count-item-box">
                    <div class="home-count-num">10w</div>
                    <div class="home-count-item">
                        <img src="/assets/img/home/count/count3.png">
                    </div>
                    <div class="home-count-info">钻石×1000</div>
                </div>
                <div class="home-count-item-box">
                    <div class="home-count-num">20w</div>
                    <div class="home-count-item">
                        <img src="/assets/img/home/count/count4.png">
                    </div>
                    <div class="home-count-info">史诗宠物<br/>白鹅王子</div>
                </div>
                <div class="home-count-item-box">
                    <div class="home-count-num">100w</div>
                    <div class="home-count-item">
                        <img src="/assets/img/home/count/count5.png">
                    </div>
                    <div class="home-count-info">传说时装<br/>美好的谷小雨</div>
                </div>
            </div>
            <div class="home-count-current">当前预约人数：{$totalCount + 1352} 人</div>

            <div class="home-rule">
                <div class="rule-title">奖励规则</div>
                <div class="rule-text">
                    一、福利一的预约奖励根据预约人数发放。达到指定预约人数即可解锁该档奖励。预约成功的用户可在游戏上线后登陆游戏领取奖励。
                </div>
                <div class="rule-text">
                    二、福利二，即“奔跑吧典藏卡”属于限量奖励，届时将会抽签发放。欢迎积极转发本页面，后台会统计转发分享次数，并根据真实有效的转发分享次来加成中签几率。
                </div>
                <!-- <div class="rule-text">
                    三、福利三，即“浙江卫视2025跨年演唱会现场门票”已截止，以下是抽签结果，稍后会有工作人员电话联系。
                </div>
                <div class="rule-text" style="text-align:center">
                    171****1008 153****1778<br/>
                    158****9105 191****1803<br/>
                    135****9296 189****8919<br/>
                    135****0363 158****4787<br/>
                    187****8084 158****6227<br/>
                    158****8714 191****7099<br/>
                    130****4543 136****9251<br/>
                    151****7283 189****2380 
                </div> -->
                <div class="rule-text">
                    三、《奔跑吧》官方手游所有活动均免费参与，任何环节都不会涉及金钱支付，请注意甄别，谨防诈骗。如有疑问，请联系《奔跑吧》手游官方邮箱：<a style="white-space: nowrap; text-decoration: underline;" href="mailto:zmg-keeprunning@163.com">zmg-keeprunning@163.com</a>。
                </div>
                <div class='rule-text'>
                    四、本次活动最终解释权归浙江卫视《奔跑吧》节目组所有。
                </div>
                <div class="rule-qr">
                    <img src="/assets/img/home/httpskeeprunning.bluezys.com.png">
                    <div class="rule-qr-desc">
                        转发分享二维码<br/>邀请好友领取预约福利
                    </div>
                </div>
            </div>
        </div>
        <div class="home-logo">
            <div class="home-logo-item">
                <img src="/assets/img/home/logo/zjws.png">
            </div>
            <div class="home-logo-item">
                <img src="/assets/img/home/logo/zsj.png">
            </div>
            <!-- <div class="home-logo-item">
                <img src="/assets/img/home/logo/bpb.png">
            </div> -->
        </div>
    </div>
</div>

<js href="/Public/store.everything.min.js"/>

<script>

    // 业务
    layui.use(['xiyucode'],function(){
        daojishi();
        show_done();
        if(typeof(store.get('sendSmsMobile')) != 'undefined'){
            $('#mobile').val(store.get('sendSmsMobile'));
        }
        $('.code-btn').click(function(){
            var $this = $(this);
            if($(this).hasClass('disabled')){
                return;
            }
            // 检测手机号码
            var mobile = $('#mobile').val();
            if(!validatePhoneNumber(mobile)){
                weui.alert("手机号码格式错误~");
                return;
            }
            $(this).addClass('disabled');
            $(this).text("剩下60秒");

            var ii = weui.loading('loading');
            $.post('/game/api/send_sms_yuyue',{mobile:mobile,pid:$('#pid').val(),s:$('#s').val(),t:time()},function(ret){
                ii.hide();
                if(ret.status){
                    weui.toast("发送成功", {duration: 1000});
                    $('#s').val('');//销毁s
                    $.get('/api/sms/get_sms_token',function(ret){
                        if(ret.status){
                            $('#s').val(ret.data);//更换s
                        }
                    });
                    $('#code').focus();//获取焦点
                    store.set('sendSmsTime',time());
                    store.set('sendSmsMobile',mobile);//发送短信的mobile
                    daojishi();
                }else{
                    $this.removeClass('disabled');
                    $this.text("获取验证码");
                    if(ret.info == 'done'){
                        weui.toast("该号码已预约成功~", {
                            duration: 1000,
                            callback: function() {
                                check_done(mobile);
                            }
                        });
                    }else{
                        weui.alert(ret.info);
                    }
                }
            });
        });

        function daojishi(){
            var remainingTime = 60;
            var sendTime = typeof(store.get('sendSmsTime')) == 'undefined' ? 0 : store.get('sendSmsTime');
            var curTime = time();
            
            if(sendTime != 0 && curTime - sendTime < 60){
                // console.log(curTime - sendTime);
                //说明还在不能发短信的状态
                if(!$('.code-btn').hasClass('disabled')){
                    $('.code-btn').addClass('disabled');
                }
                remainingTime = remainingTime - (curTime - sendTime);
                // console.log(remainingTime);
                const countdownInterval = setInterval(() => {  
                    remainingTime--;  
                    $('.code-btn').text('剩下'+remainingTime+'秒');
                    if (remainingTime <= 0) {  
                        clearInterval(countdownInterval);  
                        $('.code-btn').removeClass('disabled');
                        $('.code-btn').text('获取验证码');
                    }  
                }, 1000); 
            }
        }

        $('#submit').click(function(){
            //校验数据
            var mobile = $('#mobile').val();
            var code = $('#code').val();
            if(!validatePhoneNumber(mobile)){
                weui.alert('手机号码格式错误~');
                $('#mobile').focus();
                return;
            }
            if(code == ''){
                weui.alert('验证码不能为空~');
                $('#code').focus();
                return;
            }
            if(code.length != 6){
                weui.alert('验证码格式错误~');
                $('#code').focus();
                return;
            }
            var ii = weui.loading('loading');
            $.post('/game/api/check_sms_yuyue_code',{mobile:mobile,code:code,pid:$('#pid').val(),t:time()},function(ret){
                ii.hide()
                if(ret.status){
                    weui.toast("预约成功", {
                        duration: 1000,
                        callback: function() {
                            check_done(mobile);
                        }
                    });
                }else{
                    weui.alert(ret.info);
                }
            });
        });
        // 检测是否完成预约
        function check_done(mobile){
            $.post('/game/api/check_yuyue_done',{mobile:mobile,pid:$('#pid').val()},function(ret){
                if(ret.status){
                    store.set('yuyueObj',ret.data);
                    show_done();
                }
            });
        }

        function show_done(){
            var yuyueObj = typeof(store.get('yuyueObj')) == 'undefined' ? null : store.get('yuyueObj');
            if(yuyueObj != null){
                $('#time').text(think_time(yuyueObj.create_time, 'Y-m-d H:i:s'));
                $('.form-yuyue').hide();
                $('.yuyue-info').show();
            } 
        }

        $('.share').click(function(){
            $('.share-box').show();
            $('html, body').scrollTop(0);
        });
        $('.share-box').click(function(){
            $(this).hide();
        })
    });
    function validatePhoneNumber(phoneNumber) {  
        const phoneRegex = /^1[3-9]\d{9}$/;  
        return phoneRegex.test(phoneNumber);  
    }  
</script>

<script src="/assets/js/cztv/cztvApi.js"></script>
<script>
    // Z视介分享相关
    const cztvApi = new CztvApi()
    // cztvApi.close()
    const shareData = {
        url: 'https://keeprunning.bluezys.com',//分享的网址
        title: '《奔跑吧》官方手游预约',
        content: "《奔跑吧》官方手游开启预约啦！立刻预约领取丰厚福利，更有机会获取限定好礼",
        img: "https://keeprunning.bluezys.com/assets/img/logo.jpg",
    }
    cztvApi.changeShareInfo(shareData)
    cztvApi.showShareButton(true)
    // console.log(cztvApi);
</script>